<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>用户信息</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
	<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
	<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body class="layui-layout-body">
    <%--条件查询    start--%>
    <div>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" id="userTelphone">
        </div>
        <button class="layui-btn" id="lookfor">查找用户</button>
    </div>
    <%--条件查询    end--%>
	<%--表格 start--%>
	<div class="layui-row">
		<table id="userList" lay-filter="userList"></table>
	</div>
    <!--自定义显示图片 d代表data当前对象-->
    <script type="text/html" id="showimg">
        <img src="${pageContext.request.contextPath}/{{d.userImage}}" width="39px" height="39px"/>
    </script>
    <!--自定义显示图片 d代表data当前对象-->
	<!--表格最右边编辑表格-->
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">冰冻/解冻</a>
		<%--<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>--%>
	</script>
	<%--表格 end--%>
	<script>
		layui.use(['form','table','layer'],function () {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var $ = layui.$;
			/*显示表格所有内容*/
			table.render({
				elem: '#userList'
				,height: 500
				,url:'${pageContext.request.contextPath}/user/selectAllUsers' //数据接口
				,limit:5   //默认每页三条数据,要求limit的值必须包含的limits中
				,limits:[5,10,15]
				,page: true //开启分页
				,cols: [[ //表头
					{type:'checkbox'}
					,{field: 'userId', title: '编号', width:75}
					,{field: 'userTelphone', title: '账号', width:100}
					,{field: 'userPassword', title: '密码(加密)', width:150}
					,{field: 'userImage', title: '头像', width:150,align: "center", templet: "#showimg"}
					,{field: 'userNickname', title: '昵称', width:150}
					,{field: 'userName', title: '名字', width:100}
					,{field: 'userSex', title: '性别', width:80}
					,{field: 'userAutograph', title: '个性签名', width:150}
					,{field: 'userProvince', title: '用户省份', width:70}
					,{field: 'userCity', title: '用户城市', width:70}
					,{field: 'guruId', title: '关注的大师id', width:50}
					,{field: 'userStatus', title: '用户状态', width:70,templet:function (d) {
							if (d.userStatus==0) {
								return '正常'
							}else {
								return '冻结'
							}
						}}
					,{field: 'userCreateDate', title: '用户创建时间', width:150}
					,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
				]]
			});
            /*---------条件查询start-------*/
            $("#lookfor").click(function () {
                table.reload('userList',{
                    where:{
						userTelphone:$("#userTelphone").val()
                    },
                    page:{
                        curr:1  //从第一页开始
                    }
                })
            })
            /*--------条件查询end-------------*/
            /*---编辑、删除 start---*/
            table.on('tool(userList)',function (obj) {
            	console.log(obj.data)
                //修改
                if(obj.event=='edit'){
                    $.ajax({
                        url:'${pageContext.request.contextPath}/user/updateUserStatus',
                        data:obj.data,
                        success:function (result) {
                            if (result.flag){
                                table.reload('userList');
                                //响应给用户信息，添加成功
                                layer.msg("状态更换成功！")
                            }
                            else {
                                layer.msg("状态更换失败！")
                            }
                        },
                        error:function () {
                            alert("出现异常，联系管理员！")
                        }
                    })
                } else {

                }
                return false;
            })
            /*---编辑、删除 end---*/
		})

	</script>
</body>

</html>